<template>
	<view class="my_container">
		<CustomNavbarTwo :title="pageTitle" />
		<view class="my_container_body">
			<view class="my_container_body_head"></view>
			<view class="my_container_body_body">
				<view class="o1">
					<view>头像</view>
					<image @click="uploadAavtar" :src="userInfo.avatar"></image>
				</view>
				<view class="o2">
					<view class="o21">昵称</view>
					<view class="o22">
						<u--input v-model="userInfo.nickName" inputAlign="right" fontSize="14" border="none"></u--input>
					</view>
				</view>
				<view class="o2">
					<view class="o21">地区</view>
					<view class="o22" @tap="showRegion = true">
						<u-input :readonly="true" inputAlign="right" v-model="userInfo.regionText" placeholder="请选择地区"
							border="none" />
					</view>
				</view>
				<!-- 				<view class="o2">
					<view class="o21">地址</view>
					<view class="o22">
						<u--input v-model="user.district" inputAlign="right" fontSize="14" border="none"></u--input>
					</view>
				</view> -->
				<view class="o2">
					<view class="o21">电话</view>
					<view class="o22">
						<u--input v-model="userInfo.phonenumber" inputAlign="right" fontSize="14"
							border="none"></u--input>
					</view>
				</view>
				<view class="o2">
					<view class="o21">管理</view>
					<view class="o22" @tap="handleLogoff">注销账号</view>
				</view>
				<view class="o2 o4">
					<view class="o21">简介</view>
					<view class="o22">
						<u--textarea v-model="userInfo.briefInfo" placeholder="请输入简介" border="none"></u--textarea>
					</view>
				</view>
			</view>
		</view>
		<view class="btn">
			<button @tap="updateProfile">保存修改</button>
			<button class="button1" @tap="handleLogout">退出登录</button>
		</view>
		<u-picker :show="showRegion" :loading="loading" ref="uPicker3" :columns="columns3" @confirm="regionConfirm"
			@cancel="showRegion = false" @change="changeHandler"></u-picker>
	</view>
</template>
<script>
	import CustomNavbarTwo from '@/components/CustomNavbarTwo.vue';
	import store from '../../store/index.js';
	const api = require('../../util/api.js');
	export default {
		components: {
			CustomNavbarTwo
		},
		data() {
			return {
				// lat
				pageTitle: '个人信息',
				showSex: false,
				user: {},
				userInfo: {},
				showRegion: false,
				loading: false,
				columnData: [],
				columns3: [],
				lat: '',
				lon: ''
			};
		},
		onLoad() {
			this.getUserInfo();
			this.getAddress();
		},
		onUnload() {
			// 页面卸载时执行的操作
			console.log('res');
			// this.updateProfile();
		},
		methods: {
			//退出登录
			handleLogout() {
				let _that = this;
				uni.showModal({
					title: '提示',
					content: '是否退出登录？',
					success: function(res) {
						if (res.confirm) {
							// 调用清除数据的mutation
							uni.clearStorageSync();
							_that.$store.commit('clearAuthData');
							_that.$store.commit('clearUnreadCount');
							uni.navigateBack({
								delta: 1
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			handleLogoff() {
				let _that = this;
				uni.showModal({
					title: '提示',
					content: '注销后无法恢复,是否确定注销账号？',
					success: function(res) {
						if (res.confirm) {
							_that.$https.post(_that.$api.handleLogOff, {}).then((res) => {
								if (res.code === 200) {
									// 调用清除数据的mutation
									uni.clearStorageSync();
									_that.$store.commit('clearAuthData');
									_that.$store.commit('clearUnreadCount');
									uni.navigateBack({
										delta: 1
									});
									console.log('用户点击确定');
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									});
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			getMyLoction() {
				uni.showLoading({
					title: '定位中,请稍后'
				});
				const _that = this;
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						_that.lat = res.latitude;
						_that.lon = res.longitude;
						_that.userInfo.lat = res.latitude;
						_that.userInfo.lon = res.longitude;
						_that.getAddressByLanLen(res.latitude, res.longitude);
					}
				});
			},
			getAddressByLanLen(lat, lon) {
				let data = {
					lat: lat,
					lon: lon
				};
				this.$https.post(this.$api.getAddressByLanLen, data).then((res) => {
					if (res.code === 200) {
						const data = res.data;
						this.user.province = data.provinceName;
						this.user.city = data.cityName;
						let str = data.addressDetail;
						let index = str.indexOf('市'); // 获取指定字符的位置
						let result = str.slice(index + 1); // 截取指定字符后面的内容
						this.user.district = data.provinceName + data.cityName + data.districtName;
						uni.setStorageSync('address', JSON.stringify(res.data));
						console.log(result); // 输出：指定字符后面的内容
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
					uni.hideLoading();
				});
			},
			uploadAavtar() {
				const _that = this;
				uni.chooseImage({
					sourceType: ['camera', 'album'],
					success: function(res) {
						const url = res.tempFilePaths[0];
						_that.upload(url);
					}
				});
			},
			upload(imgUrl) {
				const _that = this;
				uni.uploadFile({
					url: _that.$api.upload,
					filePath: imgUrl,
					name: 'file',
					header: {
						'Content-Type': 'application/json',
						Authorization: 'Bearer ' + uni.getStorageSync('token')
					},
					formData: {},
					success: (uploadFileRes) => {
						const result = uploadFileRes.data;
						var res = JSON.parse(result);
						if (res.code === 200) {
							_that.userInfo.avatar = res.data.url;
						} else {
							uni.showToast({
								title: res.errMsg,
								icon: 'none'
							});
						}
					}
				});
			},
			updateProfile() {
				if (!this.userInfo.regionText) {
					return uni.showToast({
						title: '请选择地区',
						icon: 'error'
					});
				}
				this.$https.post(this.$api.updateProfile, this.userInfo).then((res) => {
					if (res.code === 200) {
						store.commit('setUserInfo', this.userInfo);
						return uni.showToast({
							title: '修改成功',
							icon: 'success'
						});
					} else {
						console.log('修改失败');
					}
				});
			},
			getAddress() {
				this.$https.post(this.$api.getAddress).then((res) => {
					if (res.code === 200) {
						const data = res.data;
						this.columns3 = res.data.parent;
						this.columnData = res.data.child;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
						this.show = false;
					}
				});
			},
			// 确认选择
			regionConfirm(e) {
				const p = e.value[0];
				const c = e.value[1];
				if ('全部' == p) {
					this.userInfo.province = '';
					this.userInfo.city = '';
				} else {
					this.userInfo.province = p;
					this.userInfo.city = c;
				}
				this.userInfo.regionText = this.userInfo.province + this.userInfo.city;
				this.showRegion = false;
			},
			changeHandler(e) {
				const {
					columnIndex,
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker3
				} = e;
				const name = e.value[0];
				if (columnIndex === 0) {
					this.loading = true;
					// 模拟网络请求
					uni.$u.sleep(500).then(() => {
						picker.setColumnValues(1, this.columnData[index]);
						this.loading = false;
					});
				}
			},
			getUserInfo() {
				this.$https.get(this.$api.getInfo, {}).then((res) => {
					if (res.code === 200) {
						this.userInfo = res.data.user;
						this.userInfo.regionText = res.data.user.province + res.data.user.city;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.my_container {
		width: 100%;
		font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
		font-style: normal;
		text-transform: none;

		.my_container_body {
			width: 750rpx;
			min-height: 100vh;
			background: linear-gradient(180deg, #ddffde 0%, #f7f7f7 29%, #f7f7f7 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;

			.my_container_body_head {
				width: 686rpx;
				height: 176rpx;
			}

			.my_container_body_body {
				margin-top: 20rpx;
				width: 686rpx;
				// height: 724rpx;
				background: #ffffff;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin-left: 32rpx;

				.o1 {
					margin-left: 28rpx;
					height: 164rpx;
					display: flex;
					width: 630rpx;

					view {
						height: 164rpx;
						line-height: 164rpx;
						width: 522rpx;
						text-align: left;
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
					}

					image {
						margin-top: 20rpx;
						width: 108rpx;
						height: 108rpx;
						border-radius: 55rpx;
					}
				}

				.o2 {
					margin-left: 2rpx;
					height: 112rpx;
					display: flex;
					width: 682rpx;
					border-bottom: 1rpx solid #e4e4e4;

					.o21 {
						height: 112rpx;
						margin-left: 26rpx;
						width: 60rpx;
						text-align: left;
						font-size: 28rpx;
						line-height: 112rpx;
					}

					.o22 {
						margin-top: 32rpx;
						height: 36rpx;
						width: 596rpx;
						padding-right: 26rpx;
						font-size: 28rpx;
						text-align: right;
					}
				}

				.o3 {
					margin-left: 2rpx;
					height: 112rpx;
					display: flex;
					width: 682rpx;
					border-bottom: 1rpx solid #e4e4e4;

					.o31 {
						height: 112rpx;
						margin-left: 26rpx;
						width: 60rpx;
						text-align: left;
						font-size: 28rpx;
						line-height: 112rpx;
					}

					.o32 {
						margin-top: 32rpx;
						height: 36rpx;
						width: 538rpx;
						text-align: left;
					}

					.o33 {
						margin-top: 42rpx;
						height: 28rpx;
						width: 28rpx;
						margin-left: 4rpx;
					}

					.o34 {
						width: 26rpx;
					}
				}

				.o4 {
					height: 300rpx;
					border: none !important;
				}
			}
		}

		.btn {
			width: 100%;
			position: fixed;
			bottom: 40rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			button {
				color: #fff;
				background-color: #10cf40;
				border-radius: 50rpx;
				width: 90%;
				margin-bottom: 20rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 34rpx;
			}

			.button1 {
				background-color: #d0d0d0;
			}
		}
	}
</style>